<template>
	<view class="content">
		<!-- 用户头像header -->
		<view class='member-top'>
			<image class='bg-img' :src='bgImage'></image>
			<view class='member-top-c' :style="{'padding-top': statusBarHeight + 'px'}">
				<template v-if="hasLogin">
					<image class='user-head-img' mode="aspectFill" :src='avatar'></image>
					<view class='user-name'>{{ nickname }}</view>
				</template>
				<template v-else>
					<!-- #ifdef H5 || APP-PLUS -->
					<image class='user-head-img' mode="aspectFill" :src='loginLogo'></image>
					<view class="login-btn" @click="toLogin">
						登录/注册
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="user-head-img">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view>
						<button class="login-btn" hover-class="btn-hover" @click="goLogin()">授权登录</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<view class="user-head-img"></view>
					<view>
						<button class="login-btn" open-type="getAuthorize" @click="getALICode"
							hover-class="btn-hover">授权登录</button>
					</view>
					<!-- #endif -->
				</template>
			</view>
		</view>
		<!-- 用户头像header end -->


		<!-- 订单列表信息 -->
		<view class='cell-group'>
			<u-cell-group>
				<u-cell title="我的订单" :isLink="true"></u-cell>
			</u-cell-group>
		</view>

		<view class='member-grid'>
			<u-grid col="4" :border="true" @click="orderNavigateHandle">
				<u-grid-item v-for="(item, index) in orderItems" :key="index">
					<u-icon :name="item.icon" :size="30" style="position: relative;"></u-icon>
					<u-badge type="error" max="99" :value="item.nums" :absolute="true" :offset="[0,30]"></u-badge>
					<text class="grid-text">{{item.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 订单列表end -->

		<!-- 其他功能菜单start -->
		<view class='member-menu'>
			<u-cell-group v-for="(item,index) in memberMenus" :key="index">
				<u-cell size="large" :icon="item.icon" :title="item.name" isLink :url="item.url">
					<!-- <u-icon slot="icon" :name="item.icon"  size="20"></u-icon> -->
				</u-cell>
			</u-cell-group>
		</view>


	</view>

</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				loginLogo: "https://cdn.uviewui.com/uview/album/1.jpg",
				avatar: "https://cdn.uviewui.com/uview/album/2.jpg",
				bgImage: "https://cdn.uviewui.com/uview/album/1.jpg",
				hasLogin: false,
				nickname: "假装有昵称",
				afterSaleNums: 0,
				orderItems: [{
						name: '待付款',
						icon: 'shopping-cart',
						nums: 1
					},
					{
						name: '待发货',
						icon: 'bag',
						nums: 0
					},
					{
						name: '待收货',
						icon: 'car',
						nums: 3
					},
					{
						name: '待评价',
						icon: 'star',
						nums: 0
					}
				],
				memberMenus: [{
						name: '我的余额',
						icon: 'rmb-circle',
						url: '',
						color: "#2979ff"
					},
					{
						name: '会员等级',
						icon: 'integral',
						url: '',
					},
					{
						name: '地址管理',
						icon: 'map',
						url: '/pages/member/address/list',
					},
					{
						name: '我的收藏',
						icon: 'heart',
						url: '',
					},
					{
						name: '我的优惠券',
						icon: 'coupon',
						url: '',
					},
					{
						name: '我的足迹',
						icon: 'eye',
						url: '',
					},
					{
						name: '邀请好友',
						icon: 'share-square',
						url: '',
					},
					{
						name: '个人设置',
						icon: 'setting',
						url: '/pages/member/setting/index',
					},
				],
			}
		},
		computed:{
			...mapState('navbar', ['statusBarHeight'])
		},
		methods: {
			goLogin() {
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
			},
			toLogin(){
				
			},
			orderNavigateHandle() {

			},
			getALICode(){
				
			},
		}
	}
</script>

<style lang="scss">
	.content {
		//padding-top: calc(var(--window-top) + 10px);
		height: 100%;
	}

	.member-top {
		position: relative;
		width: 100%;
		height: 340rpx;

		.bg-img {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.member-top-c {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			padding-bottom: 30rpx;
		}

		.user-head-img {
			display: block;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: rgba(255, 255, 255, 0.7);
			margin: 0 auto 16rpx;
		}

		.user-name {
			font-size: 30rpx;
			// color: #fff;
			margin-bottom: 16rpx;
		}
	}

	.member-grid {
		background-color: #fff;
		border-top: 2rpx solid #eee;
		padding: 20rpx 0;

		.grid-text {
			font-size: 28rpx;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
	}



	.login-btn {
		color: #fff;
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		background: #ff7159;
		font-size: 24rpx;
	}

	::v-deep .u-cell__title-text {
		vertical-align: middle;
		padding-left: 10rpx;
	}
</style>